import React from 'react';
import './extendDate'
import './clcok.scss'

export default class Clock extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            date: new Date().Format("hh:mm:ss")
        };
    }

    /**
     * 组件挂载后执行
     * 一秒一次调用tick函数
     */
    componentDidMount(){
        this.timerID = setInterval(
            () => this.tick(),
            1000
        );
    }

    /**
     * 一但Clock组件被移除，计时器停止
     */
    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    /**
     * 更新时间
     */
    tick() {
        this.setState({
            date: new Date().Format("hh:mm:ss")
        });
    }

    render() {
        return (
            <div>
                <h2 className="clock">{this.state.date}</h2>
            </div>
        )
    }

}